<div class="module-container">
  <h1>Typography</h1>

  <hr />

  <!-- Headings -->
  <h2>Headings</h2>

  <p>All HTML headings, <code>&lt;h1&gt;</code> through <code>&lt;h6&gt;</code> are available.</p>

  <div class="bs-example bs-example-type">
    <table class="table">
      <tbody>
      <tr>
        <td><h1>h1. Bootstrap heading</h1></td>
        <td class="gray-text" style="padding-top: 14px;">Semibold 36px</td>
      </tr>
      <tr>
        <td><h2>h2. Bootstrap heading</h2></td>
        <td class="gray-text" style="padding-top: 14px;">Semibold 30px</td>
      </tr>
      <tr>
        <td><h3>h3. Bootstrap heading</h3></td>
        <td class="gray-text" style="padding-top: 14px;">Semibold 24px</td>
      </tr>
      <tr>
        <td><h4>h4. Bootstrap heading</h4></td>
        <td class="gray-text" >Semibold 18px</td>
      </tr>
      <tr>
        <td><h5>h5. Bootstrap heading</h5></td>
        <td class="gray-text" >Semibold 14px</td>
      </tr>
      <tr>
        <td><h6>h6. Bootstrap heading</h6></td>
        <td class="gray-text" >Semibold 12px</td>
      </tr>
      </tbody>
    </table>
  </div>
  <pre class="prettyprint">
&lt;h1&gt;...&lt;/h1&gt;
&lt;h2&gt;...&lt;/h2&gt;
&lt;h3&gt;...&lt;/h3&gt;
&lt;h4&gt;...&lt;/h4&gt;
&lt;h5&gt;...&lt;/h5&gt;
&lt;h6&gt;...&lt;/h6&gt;</pre>

</div>